<template>
	<view>
		<view class="Info" v-if="pageData">
			<view class="User">
				<view class="userBox">
					<image
						:src="$imgUrls(pageData.headimg)"
						mode="aspectFill"
						class="userImg"></image>
					<view class="Lvs">{{ pageData.thisTeamLevel.name }}</view>
				</view>
				<view class="infoText">
					<text class="size30">{{ pageData.name }}</text>
					<text class="size30 m-top10">{{ pageData.tel }}</text>
				</view>
			</view>
			<view class="Datas">
				<text class="tex">绿色积分:{{ pageData.all_green_fen }}</text>
				<text class="tex">余额:{{ pageData.money }}</text>
				<text class="tex">积分:{{ pageData.jifen_yue }}</text>
			</view>
		</view>

		<view class="LvBox" v-if="pageData">
			<text class="LvTitle">管理等级</text>
			<view class="LvWrapper">
				<text class="lv_name">{{ pageData.upLevelInfo.thisLevelTitle }}</text>
				<view class="content">
					<text class="Txt">{{ pageData.upLevelInfo.text }}</text>
					<view class="line">
						<u-line-progress
							:percentage="pageData.upLevelInfo.proportion"
							height="9"
							activeColor="#ffcc00"></u-line-progress>
					</view>
				</view>
				<text class="currentLv">{{ pageData.upLevelInfo.nextLevelTitle }}</text>
			</view>
		</view>

		<view class="performance" v-if="pageData">
			<view class="perlist">
				<text class="perTxt">累计业绩（笔）</text>
				<text class="perNum">{{
					Number(pageData.teamInfo.my_order_num) +
					Number(pageData.teamInfo.team_order_num)
				}}</text>
			</view>
			<view class="perlist">
				<text class="perTxt">团队成员（位）</text>
				<text class="perNum">{{ pageData.teamInfo.team_user_num }}</text>
			</view>
		</view>

		<view class="listBox">
			<view class="list" @click="toUrl('/Releases/deal/buy')">
				<image src="../static/imgs/01.png" mode="aspectFill" class="ListImg"></image>
				<text class="List_Txt">兑换仓单</text>
			</view>
			<view class="list" @click="$pop.tofugou()">
				<image src="../static/imgs/02.png" mode="aspectFill" class="ListImg"></image>
				<text class="List_Txt">套餐购买</text>
			</view>
			<view class="list" @click="toUrl('/Releases/Income')">
				<image src="../static/imgs/03.png" mode="aspectFill" class="ListImg"></image>
				<text class="List_Txt">收益记录</text>
			</view>
			<view class="list" @click="toUrl('/Releases/Team')">
				<image src="../static/imgs/04.png" mode="aspectFill" class="ListImg"></image>
				<text class="List_Txt">团队成员</text>
			</view>
			<view class="list" @click="toUrl('/Releases/Greeninte')">
				<image src="../static/imgs/05.png" mode="aspectFill" class="ListImg"></image>
				<text class="List_Txt">绿色积分记录</text>
			</view>
			<view class="list" @click="toUrl('/Releases/points')">
				<image src="../static/imgs/06.png" mode="aspectFill" class="ListImg"></image>
				<text class="List_Txt">余额账户记录</text>
			</view>
			<view class="list" @click="toUrl('/Releases/consum')">
				<image src="../static/imgs/06.png" mode="aspectFill" class="ListImg"></image>
				<text class="List_Txt">积分账户记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/Api.js';
	export default {
		data() {
			return {
				img: 'https://msraimgcdn.mogoie.com/6137/1731484174751.jpg',
				pageData: '',
			};
		},
		onLoad() {
			this.getConfig();
		},
		methods: {
			async getConfig() {
				const result = await Api.getConfig();
				this.pageData = result;
			},
		},
	};
</script>

<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
	.listBox {
		width: 740rpx;
		margin: 40rpx auto;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-row-gap: 32rpx;

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;

			.ListImg {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.List_Txt {
				color: #333;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}

	.performance {
		width: 690rpx;
		padding: 20rpx;
		background-color: #fff;
		margin: 26rpx auto 0;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;

		.perlist {
			display: flex;
			flex-direction: column;

			.perTxt {
				color: #333;
				font-size: 28rpx;
			}

			.perNum {
				color: #333;
				font-size: 42rpx;
				font-weight: 500;
				margin-top: 4rpx;
			}
		}
	}

	.LvBox {
		width: 690rpx;
		padding: 20rpx;
		background-color: #fff;
		margin: 26rpx auto 0;
		border-radius: 10rpx;

		.LvTitle {
			color: #333;
			font-size: 30rpx;
		}

		.LvWrapper {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.lv_name {
				color: #000;
				font-size: 28rpx;
				font-weight: 500;
			}

			.content {
				flex: 1;
				margin: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.Txt {
					color: #b7655a;
					font-size: 26rpx;
				}

				.line {
					width: 100%;
					margin-top: 10rpx;
				}
			}

			.currentLv {
				color: #333;
				font-size: 32rpx;
			}
		}
	}

	.Info {
		width: 100%;
		background-color: #000066;
		padding: 40rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.User {
			width: 100%;
			display: flex;
			align-items: center;

			.userBox {
				width: 150rpx;
				height: 120rpx;
				display: flex;
				justify-content: center;
				position: relative;

				.userImg {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.Lvs {
					max-width: 100%;
					background-color: #ff9900;
					color: #fff;
					font-size: 22rpx;
					padding: 2rpx 10rpx;
					border-radius: 4rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					text-align: center;
					white-space: nowrap;
				}
			}

			.infoText {
				display: flex;
				flex-direction: column;
				color: #fff;
				font-size: 30rpx;
			}
		}

		.Datas {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 26rpx;

			.tex {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
</style>
